import React, { Component } from 'react'
import Tabbar from '../Common/Tabbar'
import Header from '../Common/Header'
import { connect } from 'react-redux'
import {cancel_action} from '../../store/store'
/* 收藏组件 */
class Dhsc extends Component {
    render() {
        return (
            <div className="dhsc">
                {/* 头部导航 */}
                <Header title="收藏"></Header>
                {/* 主体 */}
                <div className="content">
                    {/* 渲染收藏列表 */}
                    {
                        this.props.sclist.map((item,index)=>{
                         return  <div className="item" key={index}>
                                <div className="img">
                                  <img src={item.pic} alt=""/>
                                </div>
                                <div className="text">
                                <div className="wb">
                                    {item.title}</div> 
                                    <div className="ks">￥:{item.ks}</div>
                                    <div className="yh">用户:{item.iphone}</div>
                                </div>
                                <div className="btn">
                                   <span className="cyjp" onClick={()=>{this.props.cancel(item.id);
                                   }}>取消收藏</span>
                                </div>
                        </div>
                        })
                    }
                </div>
                <Tabbar></Tabbar>
            </div>
        )
    }
}
export default connect(
    (state)=>{
        /* 获取收藏列表数据 */
        return{
            sclist:state.sclist
        }
    },
    (dispatch)=>{
        return{
            /* 取消收藏 */
            cancel:(id)=>{
                dispatch(cancel_action(id))
            }
        }
    }
)(Dhsc)